<template>
  <div class="madp-data-board">
    <div class="madp-header">
      <el-tabs v-model="activeTab" class="tabs-menu" @tab-click="changeTab">
        <el-tab-pane label="营销数据" name="1"></el-tab-pane>
        <el-tab-pane label="客户数据" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="container hidden-scrollbar">
      <!-- 营销数据 -->
      <marketing-data-com v-if="activeTab == 1" />
      <!-- 客户数据 -->
      <customer-data-com v-else-if="activeTab == 2" />
    </div>
    <back-btn />
  </div>
</template>
<script>
import backBtn from '@/components/back-btn.vue'
import marketingDataCom from '@/components/manager-view/marketing-data'
import customerDataCom from '@/components/manager-view/customer-data'
export default {
  components: { backBtn, marketingDataCom, customerDataCom },
  data() {
    return {
      activeTab: '1'
    }
  },
  created() {},
  mounted() {},
  methods: {
    changeTab() {
      //
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-data-board {
  padding-top: 10px;
  .madp-header {
    background: #ffffff;
    height: 44px;
    .tabs-menu {
      width: 100%;
      /deep/.el-tabs__header {
        margin: 0;
      }
      /deep/.el-tabs__nav {
        display: flex;
        justify-content: space-between;
        width: 100%;
        .el-tabs__item {
          padding: 0;
          width: 100%;
          height: 43px;
          text-align: center;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(44, 44, 44, 0.5);
        }
        .is-active {
          color: #2c2c2c;
        }
        .el-tabs__active-bar {
          display: flex;
          justify-content: center;
          background: none;
        }
        .el-tabs__active-bar:after {
          content: '';
          width: 36px;
          height: 4px;
          margin: 0 16px;
          background: #ed5555;
          border-radius: 8px;
          position: absolute;
          top: -2px;
        }
        .el-tabs__nav-wrap::after {
          background: none;
        }
      }
      /deep/.el-tabs__nav-wrap::after {
        background: none;
      }
    }
  }
  .container {
    padding: 0 16px;
    height: calc(100vh - 60px);
    overflow-y: scroll;
  }
}
</style>